<template>
	<view>
		<view class="pd16_15" style="margin-bottom: 80upx;">
			<view class="flex alcenter space" style="margin-bottom: 30upx;">
				<view class="flex alcenter">
					<!-- <image style="width: 40rpx;height: 40rpx;" :src="statics.zhuico[3]"></image> -->
					<image style="width: 40rpx;height: 40rpx;" src="@/static/img/my/zuixinshiping.png"></image>
					<text class="ft16 ftw600 cl-w ml15 fonst1">{{$t('play.zxrb')}}</text>
				</view>
				<navigator url="/pages/client/tuan/ss">
					<view class="ft14 cl-notice fonst2">{{$t('play.zxrbzj')}}</view>
				</navigator>
			</view>
			<!-- <view style="color: aliceblue;">{{type_list}}</view> -->
			<scroll-view class="record" scroll-x="true">
			    <view class="types" v-for="(item,index) in type_list" :key="index" :class="{btna:tab_current2 == index}" @click="qie(index)">
			    {{item.name}}</view>
			   </scroll-view>
			<view class="" style="" class="mt16 flex space wrap">
				<block v-for="(value,key) in datasa" :key="key">
					<view style="width: 48%; margin-bottom: 15px;" @click="detail(value.id,0)">
						<view style="position:relative">
							
							<image
								style="width: 100%; border-radius: 9px; background-color: rgb(133, 133, 133); height: 60vw; max-height: 300px;"
								mode="aspectFill" :src="value.img">
							</image>
							<view class="namesss" style="position: absolute; top: 0px; right: 0px; margin-top: 0;"
								v-if="value.is_hy>0">
								{{$t('text.huiyuan')}}
							</view>
							<view class="ft12 text-over5 cl-w">
								<view class="ft14 ftw400 text-over cl-w">{{value.name}}</view>
								<view class="ft12 ftw400"
									style="font-size: 12px; font-weight: 400; color: rgba(166, 166, 166, 1);">
									{{$t('text.dyan')}}: {{value.daoyan}}
								</view>
								<view class="ft12 ftw400"
									style="font-size: 12px; font-weight: 400; color: rgba(166, 166, 166, 1);">
									{{$t('text.yanyuan')}}: {{value.yanyuan}}
								</view>
								<view class="ft12 ftw400 text-over cl-info">
									<span style="font-size: 12px; font-weight: 400; color: rgba(166, 166, 166, 1);">
										{{$t('text.jianjie')}}
									</span>：{{value.story}}
								</view>
								<view class="content-bottom"
									style="display: flex; flex-direction: row-reverse; margin-top: 3px;"
									v-if="value.ishot==2">
									<span>↑{{$t('text.rm')}}</span>
								</view>
							</view>
						</view>
					</view>
				</block>

				<!-- 	<block v-for="(value,key) in datasa" :key="key">
					<view class="pd10 flex bg-default1 alcenter"
						style="position: relative;border-bottom: 1px solid #ffffff0d;" @click="detail(value.id,0)">
						<view class="rank" :class="key<3?'top3':''">
							<span>{{key+1}}</span>
						</view>
						<image class="integral-mall-goods" mode="aspectFill" :src="configs.imgUrl+value.img"></image>
						<view class="hot-content">
							<view class="ft14 ftw400 text-over cl-w">{{value.name}}</view>
							<view class="ft12 ftw400 text-over cl-info">{{value.story}}</view>
							<view class="content-bottom"><span>↑{{$t('text.rm')}}</span></view>
						</view>
					</view>
				</block> -->
			</view>
		</view>
		<view class="home-main" style="height: 50upx;">
			<!-- <com-copyright></com-copyright> -->
		</view>

		<dialog-couponshareget @loginAct="showLoginCouponShareGet" v-if="showCouponShareGet"
			@closed="showCouponShareGet = false"></dialog-couponshareget>
	</view>
</template>

<script>
	
	export default {
		props: ['datasa','type_list'],
		data() {
			return {
				isLogin: false,
				showBirthday: false,
				showLogin: false,
				showQrcode: false,
				showCouponShareGet: false,
				tab_current2: 0,
				configs: {
				        imgUrl: 'https://duanju.55of.com', // 配置的基础图片URL
						cdnUrl:'https://rls.rollingshort.net/uploads'
				      },
			}
		},

		onLoad() {
		},
		
		methods: {
			//'/pages/client/tuan/detail?id='+value.id
			detail(vid, mid) {
				uni.navigateTo({
					url: '/pages/client/tuan/detail?vid=' + vid + '&mid=' + mid
				})
			},
			showLoginAct() {
				this.showLogin = true;
			},
			showLoginCouponShareGet() {
				this.showLogin = true;
			},
			loginYes() {

			},
			getImageSrc(imgPath) {
			      // 判断 imgPath 是否包含 'https://duanju.55of.com'
			      if (imgPath && imgPath.startsWith(this.configs.imgUrl)) {
			        return imgPath; // 如果已经包含，直接返回原路径
			      } else {
			        return this.configs.imgUrl + imgPath; // 否则拼接上基础路径
			      }
			    },
			qie(index) {
				this.tab_current2 = index
				this.$httpas.post2({
					data: {
						do: 'video',
						op: 'type_listnew',
						id: this.type_list[index].id
					},
					success: res => {
						this.datasa = res
					}
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.record {
		width: 92%;
		white-space: nowrap;
		margin: 30rpx;
	}
	
	.types {
		color: #666666;
		display: inline-block;
		font-size: 28rpx;
		height: 60rpx;
		line-height: 60rpx;
		justify-content: space-around;
		padding: 0 26rpx;
		margin-right: 5rpx;
		text-align: center;
		border-radius: 50rpx;
	}
	
	.btna {
		color: #ffffff;
		// background-color:$uni-themd;
		background-color: #f8ba1b;
	}
	@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
	.namesss {
		font-size: 22rpx;
		// background-color: #3f9f58;opacity: 1;
		// background-color: rgba(63, 159, 88, 0.8);
		position: absolute;
		color: #fff;
		// padding: 0 10rpx 0 10rpx;
		// border-radius: 0 20rpx 0 0;
		width: 80rpx;
		height: 50rpx;
			line-height: 50rpx;
		text-align: center;
		background: url("@/static/img/my/jux.png") no-repeat ;
		background-size: contain;
	}

	.home-header {
		height: 304rpx;
		width: 100%;
		position: relative;
		background: #363B4D;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}

	.home-main {
		width: 100%;
		position: relative;
		margin-top: -156rpx;
		padding: 0 30rpx;
	}

	.home-mendian {
		width: 100%;
		height: 84rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 42rpx;
	}

	.tuan-product-l {
		width: 320rpx;
		height: 240rpx;
		border-radius: 16rpx;
		background: #F2F2F2;
	}

	.integral-mall-goods {
		width: 3.75rem;
		height: 5rem;
		border-radius: .375rem;
		margin: 0 .5rem;
		object-fit: cover;
	}

	.tuan-product-r {
		width: calc(100% - 320rpx);
	}

	.rank {
		width: 1.5rem;
		color: rgba(255, 255, 255, .5);
		font-size: 1rem;
		font-weight: 700;
		text-align: center;
	}

	.top3 {
		color: #ff4d4f;
		font-size: 1.125rem;
	}

	.hot-content {
		width: 70%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 5rem;
		padding: .25rem 0;
	}

	.content-bottom span {
		color: #ff4d4f;
		font-weight: 700;
		font-size: .6875rem;
		background-color: rgba(255, 77, 79, .1);
		padding: .125rem .375rem;
	}

	.trend-tag {
		display: flex;
		align-items: center;
		padding: .125rem .375rem;
		background-color: rgba(255, 77, 79, .1);
		border-radius: .1875rem;
		font-size: 20rpx;
	}

	.trend-tag.up {}

	.trend-icon {
		margin-right: .125rem;
		font-weight: 700;
	}

// @font-face {
//   font-family: 'Roboto';
//   font-style: italic;
//   font-weight: bold;
//   src: url(https://fonts.gstatic.com/s/roboto/v48/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');
// }

// .content {
//   font-family: 'Roboto', sans-serif;
//   font-size: 18px;
//   color: white;
//   transform: skewX(-10deg); /* 向左倾斜 */
//   font-weight: bold; /* 加粗字体 */
//   text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5); /* 增加立体感效果 */
// }




	
</style>